<template lang="pug">
  .source
    .horn(v-show="horn") 可对指定网站、微博账号、贴吧论坛进行监测
      .close(@click="horn=false")
    .tabs
      .tab(:class="{active:tab==0}" @click="tab=0") 定向信息源设置
      .tab(:class="{active:tab==1}" @click="tab=1") 定向信息省份设置
    .views
      .view(v-show="tab==0")
        .search
          .input
            input(type="text" v-model="text" placeholder="请输入信息源名称")
            span(@click="getinput()")
          .btns
            el-button(@click="wrap=true") 添加
        .list
          table
            tr
              th 序号
              th 名称
              th 域名
              th 状态
              th(width='20%') 操作
            tr(v-for="(item,index) in sourceList" :key="index")
              td {{index+1}}
              td {{item.website}}
              td {{item.domain}}
              td {{status[parseInt(item.status)]}}
              td 
                //- span 修改
                span(@click="del(item)") 删除
      .view(v-show="tab==1")
        div 功能暂未开通
    .wrap(v-show="wrap")
      .addlist(@click.stop="")
        .head 提示 
          .close(@click="wrap=false")
        el-form.from(ref="ruleForm" :model="ruleForm"  label-width="100px" :rules="rules")
          el-form-item(label="网站名称" prop="name")
            el-input( placeholder="请输入网站名称" v-model="ruleForm.name")
          el-form-item(label="网站域名"  prop="url")
            el-input( placeholder="请输入网站域名" v-model="ruleForm.url")
        .caozuo
          el-button(type="primary" @click="success('ruleForm')") 确定
          el-button(@click="resetForm('ruleForm')") 取消
    
      
</template>
<script>
let status = {0:'停用',1:'正常'}
export default {
  name:'source',
  data(){
    return{
      tab:0,
      status,
      horn:true,
      text:'',
      wrap:false,
      sourceList:[],
      _item:'',
      ruleForm:{
        name:'',
        url:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入网址', trigger: 'blur' }
        ],
      }
    }
  },
  mounted(){
    this.getsource()
  },
  methods:{
    addsource(){
      this.wrap = true 
    },
    success(formName){
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
              let res = await this.$http.post('vrv-monitor-platform-web/whitelist/insert',{
                domain: this.ruleForm.url,
                status: 1,
                webSiteType: 1,
                website: this.ruleForm.name
              })
              if(res.body.success == true){
                this.$message.success('增加成功')
                this.getsource()
                this.wrap = false
                this.$refs[formName].resetFields();
              }else{
                this.$message.error(res.body.message)
              }
          } else {
            return false;
          }
        });
    },
    resetForm(formName){
      this.wrap = false
      this.$refs[formName].resetFields();
    },
    async getsource(){
      let res = await this.$http.post('vrv-monitor-platform-web/whitelist/queryByWebsite',{
        pageNum:1,
        pageSize:100,
        website:this.text
      })
      this.sourceList = res.body.data
    },
    getinput(){
      this.getsource()
    },
    del(item){
      this.popup = true
      this._item = item
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
          let res = await this.$http.post('vrv-monitor-platform-web/whitelist/delete',{
            id:this._item.id
          })
          if(res.body.success == true){
            this.$message.success('删除成功')
            this.getsource()
          }else{
            this.$message.error(res.body.message)
          }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
  }
}
</script>

<style lang="stylus" scoped>
.source
  min-height 100%
  background #fff
  padding-bottom 10px
  margin-right 1.7rem
  .horn
    height 41px
    text-indent 66px
    font-size 14px
    color #555555
    line-height 41px
    background url('img/horn.png') no-repeat
    background-size 20px 19px
    background-position 14px 11px
    .close
      float right 
      width 13px
      height 13px
      background url('img/close.png') no-repeat
      margin 14px 24px 0 0
      cursor pointer
  .tabs
    height 54px
    background-color #f0f5fb
    border-bottom solid 1px rgba(220, 220, 220, 1)
    font-size 0
    .tab
      display inline-block
      margin-top 15px
      height 38px
      width 158px
      background-color rgba(255, 255, 255, 1)
      border-radius 5px 5px 0px 0px
      line-height 43px
      text-align center
      font-size 14px
      color #555555
      cursor pointer
      &:first-of-type
        margin-left 31px
        margin-right 22px
      &.active
        color #ec6941
        border solid 1px rgba(220, 220, 220, 1)
        border-bottom solid 1px #fff
  .views
    .view
      font-size 14px
      .search
        height 75px
        padding 22px 49px 0 30px
        box-sizing border-box
        .input
          float left
          width 240px
          height 32px
          border-radius 16px 16px 16px 16px
          border solid 1px rgba(220, 220, 220, 1)
          font-size 0
          input
            display inline-block 
            vertical-align top
            height 32px
            width 160px
            border 0
            outline none 
            border-radius 16px
            padding 0 15px
          span 
            float right 
            width 16px
            height 16px
            margin 8px 15px 0 0
            background url('img/lookup.png') no-repeat
            background-size cover
            cursor pointer
        .btns
          float right  
          button
            margin-left 20px
            color #333333  
            font-size 14px
      .list
        table
          width 100%
          border-top solid 1px rgba(220, 220, 220, 1)
          border-bottom solid 1px rgba(220, 220, 220, 1)
          text-align center
          tr
            &:last-child
              border-bottom solid 1px rgba(220, 220, 220, 1)
            th  
              height 61px
              color #535353
              font-weight normal
            td
              height 61px
              color #000000
              border-top solid 1px rgba(220, 220, 220, 1)
              span 
                display inline-block
                color #38418a
                padding 0 14px
                cursor pointer
  .wrap
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color: rgba(0, 0, 0, 0.6);
    .addlist
      width 500px
      height 260px
      background #ffffff
      position absolute
      top 50%
      left 50%
      margin-left -250px
      margin-top -130px
      box-sizing border-box
      .head
        height 60px
        border-bottom solid 1px rgba(220, 220, 220, 1)
        line-height  60px
        text-indent 26px
        font-size 18px
        color #666
        .close
          float right 
          width 17px
          height 17px
          margin 19px 22px 0 0
          background url('img/alertclose.png') no-repeat
          cursor pointer
      .from
        margin-top 20px
        padding 0 50px
      .caozuo
        padding 0 50px
        text-align right 

</style>

